<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>水会烧开</p>;
      }
        return <p>水不会烧开</p>;
    }

    class Calculator extends React.Component {
      constructor(props) {
        super(props);
        this.state = {temperature: ''};
        this.handleChange = this.handleChange.bind(this);
      }
      handleChange(e) {
        this.setState({temperature: e.target.value});
      }
      render() {
        const temperature = this.state.temperature;
        return (
          <fieldset>
            <legend>输入一个摄氏温度</legend>
            <input value={temperature} onChange={this.handleChange}/>
            <BoilingVerdict celsius={parseFloat(temperature)}/>
          </fieldset>
        );
      }
    }



    const scaleNames = {
      c: 'Celsius',
      f: 'Fahrenheit'
    };
    // 温度转换的函数
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }
    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }
    function tryConvert(temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }

    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }
      handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
      }
      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input value={temperature} onChange={this.handleChange}/>
          </fieldset>
        );
      }
    }

    class Calculator2 extends React.Component {
      constructor(props) {
        super(props);
        this.state = {temperature: '', scale: 'c'};
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange =this.handleFahrenheitChange.bind(this);
      }
      handleCelsiusChange(temperature) {
        this.setState({scale: 'c', temperature});
      }
      handleFahrenheitChange(temperature) {
        this.setState({scale: 'f', temperature});
      }
      render() {
        const temperature = this.state.temperature;
        const scale = this.state.scale;
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
        return (
          <div>
            <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={this.handleFahrenheitChange} />
          </div>
        );
      }
    }

    ReactDOM.render(
      // <Calculator/>,
      <Calculator2/>,
      document.getElementById('root')
    );

    </script>
  </body>
</html>
